@extends('frontend.layouts.user_panel')

@section('panel_content')

    <div class="card">
            <div class="card-header">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-12">
                            <h5 class="h6">{{translate('Customers')}}</h5>
                        </div>
                    </div>
                    <form class="row" id="sort_customers" action="" method="GET">
                        <div class="col-lg-6 col-sm-12  mt-1 mb-1">
                            <select name="level" class="form-control">
                                <option value="">{{ translate('All Level') }}</option>
                                <option value="1" @if(request()->input('level') == 1) selected @endif>{{ translate('Level 1') }}</option>
                                <option value="2" @if(request()->input('level') == 2) selected @endif>{{ translate('Level 2') }}</option>
                                <option value="3" @if(request()->input('level') == 3) selected @endif>{{ translate('Level 3') }}</option>
                            </select>
                        </div>


                        <div class="col-lg-6 col-sm-12 mt-1 mb-1">
                            <button type="submit" class="btn btn-sm btn-success fs-14 w-100px" >{{ translate('Confirm') }}</button>
                        </div>
                    </form>
                </div>
            </div>

            <div class="card-body">
                <table class="table aiz-table mb-0">
                    <thead>
                    <tr>
                        <!--<th data-breakpoints="lg">#</th>-->
                        <th>
                            <div class="form-group">
                                <div class="aiz-checkbox-inline">
                                    <label class="aiz-checkbox">
                                        <input type="checkbox" class="check-all">
                                        <span class="aiz-square-check"></span>
                                    </label>
                                </div>
                            </div>
                        </th>
                        <th>{{translate('Name')}}</th>
                        <th data-breakpoints="lg">{{translate('User Type')}}</th>
                        <th data-breakpoints="lg">{{translate('Email Address')}}</th>
                        <th data-breakpoints="lg">{{translate('Phone')}}</th>
                    </tr>
                    </thead>
                    <tbody>
                    @if($users->count())
                        @foreach($users as $key => $user)

                            <tr>
                            <!--<td>{{ ($key+1) + ($users->currentPage() - 1)*$users->perPage() }}</td>-->
                                <td>
                                    <div class="form-group">
                                        <div class="aiz-checkbox-inline">
                                            <label class="aiz-checkbox">
                                                <input type="checkbox" class="check-one" name="id[]"
                                                       value="{{$user->id}}">
                                                <span class="aiz-square-check"></span>
                                            </label>
                                        </div>
                                    </div>
                                </td>
                                <td>{{$user->name}}</td>
                                <td>{{$user->user_type}}</td>
                                <td>{{$user->email}}</td>
                                <td>{{$user->phone}}</td>
                            </tr>

                        @endforeach
                    @endif
                    </tbody>
                </table>
                <div class="aiz-pagination">
                    {{ $users->appends(request()->input())->links() }}
                </div>
            </div>
    </div>


    <div class="modal fade" id="confirm-ban">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title h6">{{translate('Confirmation')}}</h5>
                    <button type="button" class="close" data-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <p>{{translate('Do you really want to ban this Customer?')}}</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-dismiss="modal">{{translate('Cancel')}}</button>
                    <a type="button" id="confirmation" class="btn btn-primary">{{translate('Proceed!')}}</a>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="virtual_user_form" data-backdrop="static">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title h6">{{translate('Create Virtual Customers')}}</h5>
                    <button type="button" class="close" data-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div style="margin-bottom: 16px; font-size: 14px; ">
                        <i>{{translate('N:B: You can create virtual customers here, with a maximum of 100 people')}}</i>
                    </div>
                    <form class="form-horizontal" action="{{ route('customers.create_virtual_user') }}" method="POST">
                    <!--<div class="form-group row">
                        <div class="col-lg-2">{{translate('Name Prefix')}}</div>
                        <div class="col-lg-6">
                           <input type="text" class="form-control" name="name_prefix" value="" placeholder="Prefix of Name" required>
                        </div>
                        <div class="col-lg-4"><span>{{translate('Optional')}}</span></div>
                    </div>-->

                        <div class="form-group row">
                            <div class="col-lg-2">{{translate('Referrel User')}}</div>
                            <div class="col-lg-6">
                                <input type="number" class="form-control" name="referred_by" value=""
                                       placeholder="Referrel User" required>
                            </div>
                        </div>

                        <div class="form-group row">
                            <div class="col-lg-2">{{translate('Quantity')}}</div>
                            <div class="col-lg-6">
                                <input type="number" min="1" step="1" max="100" class="form-control" name="quantity"
                                       value="1" placeholder="Quantity of generate" required>
                            </div>
                        </div>

                        <div class="form-group row">
                            <div class="col-lg-2">{{translate('Initial Balance')}}</div>
                            <div class="col-lg-6">
                                <input type="number" min="0" class="form-control" name="balance" value="0.00"
                                       placeholder="Initial Balance of Accounts" required>
                            </div>
                        </div>
                        <div class="form-group row">
                            <div class="col-lg-2"></div>
                            <div class="col-lg-6">
                                <div style="display: flex; align-items: center;">

                                    <div class="aiz-checkbox-inline" style="display: inline-block;">
                                        <label class="aiz-checkbox">
                                            <input type="checkbox" class="check-one" name="disable_login" value="1">
                                            <span class="aiz-square-check"></span>
                                        </label>
                                    </div>
                                    <span style="margin-top: 14px;">{{translate('Disable Log in')}}</span>


                                </div>
                            </div>
                        </div>

                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-dismiss="modal">{{translate('Cancel')}}</button>
                    <a type="button" id="submitVirtualCustomer" class="btn btn-primary">{{translate('Submit')}}</a>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="confirm-unban">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title h6">{{translate('Confirmation')}}</h5>
                    <button type="button" class="close" data-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <p>{{translate('Do you really want to unban this Customer?')}}</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-dismiss="modal">{{translate('Cancel')}}</button>
                    <a type="button" id="confirmationunban" class="btn btn-primary">{{translate('Proceed!')}}</a>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('modal')
    @include('modals.delete_modal')
@endsection

@section('script')
    <script type="text/javascript">

        $(document).on("change", ".check-all", function () {
            if (this.checked) {
                // Iterate each checkbox
                $('.check-one:checkbox').each(function () {
                    this.checked = true;
                });
            } else {
                $('.check-one:checkbox').each(function () {
                    this.checked = false;
                });
            }

        });

        $(function () {
            $('#create_virtual_user').bind('click', function () {
                $('#virtual_user_form').modal('show')
            })

            $('#submitVirtualCustomer').bind('click', function () {
                let target = $(this)
                if (target.hasClass('disabled')) return false

                target.addClass('disabled');

                let max = $('input[name=quantity]').val()
                let balance = $('input[name=balance]').val()
                let referred_by = $('input[name=referred_by]').val()

                fetch('{{route('customers.create_virtual_user')}}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-Requested-With': 'fetch'
                    },
                    body: JSON.stringify({
                        _token: '{{csrf_token()}}',
                        max,
                        balance,
                        referred_by,
                    })
                })
                    .then(resp => resp.text())
                    .then(res => {
                        if (res == 1) {
                            AIZ.plugins.notify('success', '{{translate('Successfully created virtual customer')}}')
                            setTimeout(() => {
                                window.location.reload()
                            }, 500)
                        } else {
                            AIZ.plugins.notify('danger', '{{translate('Executed failure Try again')}}')
                            target.removeClass('disabled')
                        }

                    })
                    .catch(err => null).finally(() => {
                    //target.removeClass('disabled')
                })

            })
        })

        function search_virtual_user() {
            $('#sort_customers').submit();
        }

        function sort_customers(el) {
            $('#sort_customers').submit();
        }

        function confirm_ban(url) {
            $('#confirm-ban').modal('show', {backdrop: 'static'});
            document.getElementById('confirmation').setAttribute('href', url);
        }

        function confirm_unban(url) {
            $('#confirm-unban').modal('show', {backdrop: 'static'});
            document.getElementById('confirmationunban').setAttribute('href', url);
        }

        function bulk_delete() {
            var data = new FormData($('#sort_customers')[0]);
            $.ajax({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                url: "{{route('bulk-customer-delete')}}",
                type: 'POST',
                data: data,
                cache: false,
                contentType: false,
                processData: false,
                success: function (response) {
                    if (response == 1) {
                        location.reload();
                    }
                }
            });
        }
    </script>
@endsection
